<!DOCTYPE html>
<html>
	<head>
		<title>砖家宝内部网址管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="css/common/cpCommon.css" type="text/css" media="screen"/>
		
		<style type="text/css">
			body {
				background-color: white;
			}
			
			a {
				display: block;
			}
			
			.top {
				border-bottom: 1px solid #eee;
			}
			
			.top>.btn {
				float: right;
			    background-color: cornflowerblue;
			    width: 100px;
			    text-align: center;
			    height: 30px;
			    line-height: 30px;
			    color: white;
			    font-size: 16px;
			    font-weight: 600;
			    cursor: pointer;
			}
			
			.middle {
				margin-top: 50px;
				text-align: center;
			    width: 100%;
			}
			
			.middle>.logo {
				background-image: url(view/pc/images/logo.png);
			    height: 97px;
			    width: 307px;
			    background-size: 307px;
			    background-repeat: no-repeat;
			    margin: 0 auto;
			}
			
			.middle>.search {
			    margin-top: 24px;
			}
			
			.middle>.search>.searchIpt {
				width: 50%;
				min-width: 341px;
				height: 36px;
				bottom: 0;
			    color: #bbb;
			    font-family: arial, sans-serif;
			    font-size: 16px;
			    margin-top: 1px;
			    padding: 0 8px;
			    overflow: hidden;
			    right: 9px;
			    text-align: initial;
			    text-overflow: ellipsis;
			    top: 0;
			    vertical-align: middle;
			    visibility: inherit;
			    white-space: nowrap;
			}
			
			.tail {
			    margin-top: 64px;
				text-align: center;
			    width: 100%;
			}
			
			.tail>.websites {
				width: 50%;
			    min-width: 341px;
			    margin: 0 auto;
			}
			
			.tail>.websites>.website {
			    width: 152px;
			    float: left;
			    height: 128px;
			    overflow: hidden;
			    margin-bottom: 30px;
			    border: 1px solid #eee;
			    margin-left: 8px;
			    margin-right: 8px;
			    background: rgb(242,242,242);
			    border-radius: 2px;
			    cursor: pointer;
			}
			
			.tail>.websites>.website:nth-last-child(4n+1) {
			    margin-left: 0px;
			}
			
			.tail>.websites>.website>.webtop {
				border-radius: 2px;
			}
			
			.tail>.websites>.website>.webtop>.icon {
			    float: left;
			    background-image: url(view/pc/images/favicon.ico);
			    background-size: 16px;
			    background-repeat: no-repeat;
			    margin: 0;
			    pointer-events: none;
			    top: 7px;
			    width: 30px;
			    height: 25px;
			    background-position: 7px 4px;
			}
			
			.tail>.websites>.website>.webtop>.websiteName {
			    float: left;
			    -webkit-mask-image: linear-gradient(to right, #000, #000, 100px, transparent);
			    border: none;
			    line-height: 25px;
			    font-size: 12px;
			}
			
			.tail>.websites>.website>.discription {
				height: auto;
			    min-height: 100%;
			    width: 100%;
			    background-color: white;
			    border-radius: 2px;
			    font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class="btn" id="admin">管理</div>
			<div class="clear"></div>
		</div>
		<div class="middle">
			<div class="logo"></div>
			<div class="search">
				<input class="searchIpt" id="searchIpt" data-options="required:true" placeholder="搜索"/>
			</div>
		</div>
		<div class="tail">
			<div class="websites" id="websites">
				<a class="website" href="http://www.zhuanjiabao.com">
					<div class="webtop">
						<div class="icon"></div>
						<div class="websiteName">砖家宝</div>
						<div class="clear"></div>
					</div>
					<div class="discription">描述描述描述描述描述描述描述描述描述描述手机发的就是飞机第三方第三方v的接口</div>
				</a>			
				<a class="website" href="http://www.zhuanjiabao.com">
					<div class="webtop">
						<div class="icon"></div>
						<div class="websiteName">砖家宝</div>
						<div class="clear"></div>
					</div>
					<div class="discription">描述描述描述描述描述描述描述描述描述描述手机发的就是飞机第三方第三方v的接口</div>
				</a>
			</div>
		</div>
		
		<script type="text/javascript">
			$(function() {
				loadData(); 
				clickEvent();
				search();
				
				function loadData(){
					$.post('pc0000/loadData', showView, 'json');
				}
				
				function showView(result) {
					
					function genView(row) {
						var html = [];
						
						html.push('	<a class="website" href="'+row.url+'">');
						html.push('		<div class="webtop">');
						html.push('			<div class="icon"></div>');
						html.push('			<div class="websiteName">'+ ( row.urlName ) +'</div>');
						html.push('			<div class="clear"></div>');
						html.push('		</div>');
						html.push('		<div class="discription">'+ ( row.introduce || '暂无描述') +'</div>');
						html.push('	</div>');
						
						var div = $(html.join('\r\n'));
						
						return div;
					}
					
					var container = $('#websites');
					container.empty();
					
					for(var i=0; i<result.length; i++) {
						var pDiv = genView(result[i]);
						container.append(pDiv);
					}
					
					var clearDiv = $('<div class="clear"></div>');
					container.append(clearDiv);					
				}
				
				function clickEvent() {
					$('#admin').click(function() {
						window.location = 'pc0001';
					});
				}
				
				function search() {
					$('#searchIpt').keydown(function(e) {  
						if (e.keyCode == 13) {
							$.post('pc0000/search', {
								websiteKey: $('#searchIpt').val()
							}, showView, 'json');
						}
					}); 
				}
			});			
		</script>
	</body>
</html>